<template>
  <div class="logistics">
    <div class="header">
      <span class="title">物流信息</span>
    </div>
    <div class="logistics-top">
        <div class="picleft"></div>
        <div class="logisticsnum">
            <div class="logisticscompany">物流公司:</div>
            <div class="logisticsnumber">物流订单:</div>
            <div class="logisticsphone">物流电话:</div>
        </div>
    </div>
    <div class="logistics-center">
        <div class="center">物流状态</div>
    </div>
    <div class="logistics-bottom">
       <div class="div-bg bg-white" >
    <!--物流跟踪-->
    <div style="padding-bottom: 0.5rem;">
    
        <div>
          <div class="track-rcol">
            <div class="track-list">
              <ul>
              <div v-for="(item,index) in logisticsList" :key="index"
              @click="selected(item)"
              :class="{active:index == dynamic}">
                <li class="first" v-if="index===0">
                  <div></div>
                  <i class="node-icon"></i>
                  <span class="txt">{{item.message}}</span>
                  <span class="time">{{item.messageDate}}</span>
                </li>
                <li v-if="index > 0 && index !== logisticsList.length-1">
                  <i class="node-icon"></i>
                  <span class="txt">{{item.message}}</span>
                  <span class="time">{{item.messageDate}}</span>
                </li>
                <li v-if="index === logisticsList.length-1" class="finall">
                  <i class="div-spilander"></i>
                  <i class="node-icon"></i>
                  <span class="txt">{{item.message}}</span>
                  <span class="time">{{item.messageDate}}</span>
                </li>
              </div>
              <div @click="showAll = !showAll" class="show-more">{{word}}</div>
              </ul>
            </div>
          </div>
        </div>
    </div>
  </div>
    </div>
        <!-- <div class="morelist">
      <div class="morelist-like">猜您喜欢</div>
      <div class="moregoods">
        <div class="goodsbox">
          <div class="goodsbox-top"></div>
          <div class="goodsbox-bottom">
            <div class="presenttitle">四时之序 手工胸针 细腻精巧</div>
            <div class="price">￥69.9</div>
            <div class="num">已售出65件</div>
          </div>
        </div>
        <div class="goodsbox">
          <div class="goodsbox-top"></div>
          <div class="goodsbox-bottom">
            <div class="presenttitle">四时之序 手工胸针 细腻精巧</div>
            <div class="price">￥69.9</div>
            <div class="num">已售出65件</div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
  
</template>

<script>
import * as api from "../../../request/api.js"
export default {
  name: "Logistics",
  data() {
    return {
      showAll:false,
      activeName: '',
      dynamic:'',
      logisticsListss: [

      ]
    };
  },
  created(){
    
  const that=this
  that.$http({
    method:'post',
    url:api.LOGISTICS,
    data:{
      id:this.$route.query.orderChildId
    }
  })
  .then(resp=>{
    console.log(resp)
    this.logisticsListss=resp.data.data
  })
  .catch(resp=>{

  })
  },
  methods:{
        selected: function(item) {
      this.activeName = item
    },
    goback(){
      this.$router.go(-1);
    }
  },
  computed:{
        logisticsList:function(){
      if(this.showAll == false){                    //当数据不需要完全显示的时候
        var logisticsList = [];　　　　　　　　　　　　　　　 //定义一个空数组
        if(this.logisticsListss.length > 3){　　　　　　　//这里我们先显示前三个
          for(var i=0;i<2;i++){
            logisticsList.push(this.logisticsListss[i])
          }
        }else{
          logisticsList = this.logisticsListss
        }
        return logisticsList;　　　　　　　　　　　　　　　　 //返回当前数组
      }else{
        return this.logisticsListss;
      }
    },
    word:function(){
      if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
        return '查看更多物流详情'
      }else{
        return '点击收起'
      }
    },
  }
};
</script>

<style lang="less" scoped>
@import "../../../less/Logistics.less";
</style>
